<template>
  <!-- 我已审核页面 -->
  <div class="box">
    <div class="row_top">
      <van-sticky>
        <van-row>
          <van-col
            span="12"
            @click="show = true"
            :style="{fontSize:'16px'}"
          >{{title_top}}
            <van-icon name="arrow-down" />
          </van-col>
          <van-col
            span="12"
            @click="time_one = true"
            :style="{fontSize:'16px'}"
          >{{data_time}}
            <van-icon name="arrow-down" />
          </van-col>
          <!-- 时间插件 -->
          <van-popup
            v-model="time_one"
            :safe-area-inset-bottom="true"
            :style="{width:'86%',fontSize:'14px',borderRadius:'10px'}"
            :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
          >
            <van-datetime-picker
              v-model="currentDate"
              type="date"
               :min-date="minDate"
              :max-date="maxDate"
              @confirm="getTime_one"
              @cancel="show_time_end"
            />

          </van-popup>
          <!-- 类型筛选 -->
          <van-popup
            v-model="show"
            :safe-area-inset-bottom="true"
            :style="{ width:'54%',fontSize:'14px',borderRadius:'10px'}"
            :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
          >
            <van-radio-group v-model="radio">
              <van-cell-group :style="{textAlign:'left'}">
                <van-cell
                  :title="it.name"
                  clickable
                  @click="showStatus(it.name,it.index)"
                  v-for="(it,k) in Choice"
                  :key="k"
                >
                  <van-radio
                    slot="icon"
                    :name="it.index"
                    :style="{marginRight:'4vw'}"
                  />
                </van-cell>
              </van-cell-group>
            </van-radio-group>
          </van-popup>
        </van-row>
      </van-sticky>
    </div>
    <div
      style="background-color: #f8f4f4;"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        :offset="10"
        :immediate-check="false"
        finished-text="我是有底线的"
        @load="onLoad"
      >
        <div
          v-for="(li,index) in arr"
          :key="index"
        >
          <div
            class="skeleton clearfix"
            style="margin:10px;position:relative"
            @click="showEnd(li.status,li.approvalevent)"
          >
            <div class="skeleton_content">
              <div
                class="skeleton_title left"
                v-if="li.create_name.length<3"
              >
                {{((li.create_name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}
              </div>
              <div
                class="skeleton_title left"
                v-if="li.create_name.length>=3"
              >
                {{((li.create_name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}
              </div>
              <ul>
                <li>{{li.create_name}}</li>
                <li style="margin-bottom:10px">{{li.create_date}}</li>
              </ul>

            </div>
            <ul style="padding:10px">
              <li style="margin-bottom:45px;overflow-wrap:break-word;width:75vw">{{li.approvalevent.event_name}}</li>
              <li style=" font-size: 13px;color:silver;">{{li.approvalevent.date}}</li>
            </ul>
            <div
              class="right"
              style="position:absolute;bottom:10px;right:15px"
            >
              <p><span>{{D_name}}: <span v-if=' li.approvalevent.approvalderive[0].code_b.toString().indexOf("-") != -1'>{{ li.approvalevent.approvalderive[0].code_b}}</span><span v-else>+{{li.approvalevent.approvalderive[0].code_b}}</span></span>
                <span v-if="ISC == 1" :class=" li.approvalevent.approvalderive[0].code_c==0?'active':'active1'">{{C_name}}: <span v-if=' li.approvalevent.approvalderive[0].code_c.toString().indexOf("-") != -1'>{{li.approvalevent.approvalderive[0].code_c}}</span><span v-else>+{{li.approvalevent.approvalderive[0].code_c}}</span></span>
              </p>
              <p
                class="right"
                style="font-size:14px;color:silver;"
                v-for="(li2,i) in status"
                :key="i+'info--'"
              > <span v-if="li.status==li2.index">{{li2.name}}</span></p>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div
      style="font-size:14px;padding-top:10px;"
      v-show="showText"
      v-cloak
    >暂无数据！</div>
  </div>
</template>

<script type="text/javascript">
import {
  Row,
  Col,
  Icon,
  Popup,
  RadioGroup,
  Radio,
  Cell,
  CellGroup,
  Switch,
  Button,
  Checkbox,
  CheckboxGroup,
  Dialog,
  Field
} from "vant";
import { DatetimePicker } from "vant";
export default {
  data() {
    return {
      radio: 0,
      show_dialog: false,
      showText: false,
      show_red: true,
      // display: true,
      button: false,
      show: false,
      time_one: false,
      time_two: false,
      date: 0,
      checked: false,
      loading: false, // 上拉加载
      finished: false, // 上拉加载完毕
      offset: 100, // 滚动条与底部距离小于 offset 时触发load事件
      pageSize: 10, // 每页条数
      pageIndex: 1,
      jp: 0,
      result: [],
      arr: [],
      status: [
        {
          index: 0,
          name: "初审中"
        },
        {
          index: 1,
          name: "终审中"
        },
        {
          index: 2,
          name: "通过"
        },
        {
          index: 3,
          name: "驳回"
        },
        {
          index: 4,
          name: "撤回"
        }
      ],
      Choice: [
        {
          index: 0,
          name: "待我审核"
        },
        {
          index: 1,
          name: "我已审核"
        }
      ],
      title_top: "我已审核",
      minDate: new Date(2018, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      data_time: "时间",
      num: 0,
      people_userId: 0,
      C_name: "",
      D_name: "",
      field_value: "同意",
      isField: 0,
      ISC:''
    };
  },
  created() {
    this.C_name = localStorage.getItem("c_name");
    this.D_name = localStorage.getItem("d_name");
    this.getExamine(0);
    this.radio=1;
    this.getIsC();
     dd.biz.navigation.setTitle({
        title: "我的审核" //控制标题文本，空字符串表示显示默认文本
      });
  },
  methods: {
    /**
     * rfj
     * 审核
     *
     */
     //C分开关
    async getIsC(){
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/getIsC?corpId=${corpId}`
      );
      // localStorage.setItem("ISC", res.data.data.is_c_code);
      this.ISC = res.data.data.is_c_code
    },
    // 时间取消
    show_time_end() {
      this.data_time = "时间";
      this.currentDate = new Date();
      this.getExamine(0);
      this.time_one = false;
    },
    // 时间筛选
    getTime_one(time) {
      const d = new Date(time);
      let yy = d.getFullYear();
      let mm = this.p(d.getMonth() + 1);
      let dd = this.p(d.getDate());
      const resDate = yy + "-" + mm + "-" + dd;
      this.data_time = resDate;
      this.time_one = false;
      // if (Number(this.num) == 1) {
      this.getExamine(0, resDate);
      // }
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    onLoad() {
      const p = this.jp;
      this.pageIndex++;
      this.getExamine(p, this.data_time);
    },
    // 我已审核
    async getExamine(cursor, year) {
        let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      let userId = localStorage.getItem("userId");
      if (year == undefined || year == "时间") {
        year = "";
      }
      await this.$http
        .get(
          `yuepoints/Myaudit?corpId=${corpId}&userId=${userId}&status=2&cursor=${cursor}&date=${year}`
        )
        .then(res => {
          const {
            data: { event },
            data,
            cursor,
            errcode
          } = res.data;
          if (errcode == "0000") {
            this.$forceUpdate();
            if (event.length == 0 || event == null) {
              this.finished = true;
              // this.$toast("数据为空！");
              return;
            }
            if (event.length < this.pageSize) {
              this.finished = true;
            }
            if (this.pageIndex == 1) {
              this.arr = event;
            } else {
              this.arr = this.arr.concat(event);
            }
            if (cursor > 0) {
              this.jp = cursor;
            }
          } else {
            this.arr = [];
            this.finished = true;
          }
        })
        .catch(error => {
          
        })
        .finally(() => {
          this.loading = false;
        });
     
    },
    // 状态选择
    showStatus(name, i) {
      this.num = i;
      this.title_top = '我已审核';
      if (Number(i) == 0) {
       this.$router.push({
        //核心语句
        path: "/toExamine", //跳转的路径
      });
      } 
      this.show = false;
    },
    // 终审
    showEnd(status, li) {
      let id;
      for (let i = 0; i < li.approvalderive.length; i++) {
        id = li.approvalderive[i].a_id;
        if (status == 1) {
          this.$router.push({
            //核心语句
            path: "/end", //跳转的路径
            query: {
              //路由传参时push和query搭配使用 ，作用时传递参数
              id: id,
              status: 2
            }
          });
        } else {
          this.$router.push({
            //核心语句
            path: "/initial", //跳转的路径
            query: {
              //路由传参时push和query搭配使用 ，作用时传递参数
              status: 2,
              id: id
            }
          });
        }
      }
    }
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [DatetimePicker.name]: DatetimePicker,
    [Switch.name]: Switch,
    [Button.name]: Button,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Dialog.Component.name]: Dialog.Component,
    [Field.name]: Field
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
  background-color: #f8f4f4;
  padding-bottom: 55px;
  /deep/.van-field__control {
    text-align: center;
  }
  /deep/ .van-sticky {
    background: #fff;
  }
  /deep/ .van-checkbox__icon {
    height: 30px;
  }
  .vanRow {
    border-top: 1px solid rgba(192, 192, 192, 0.288);
    padding: 5px 20px;
    line-height: 5vh;
    background: #fff;
  }
  /deep/ .van-switch {
    margin-top: 5px;
    float: right;
  }
  p {
    margin: 0px;
  }
  .row_top {
    background-color: #fff;
    height: 45x;
    line-height: 45px;
  }
  .skeleton {
    background: #fff;
    padding: 10px 0px 0px 10px;
    text-align: left;
    .skeleton_title {
      color: #fff;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      text-align: center;
      line-height: 48px;
      background: rgb(89, 209, 255);
      font-size: 16px;
      margin-right: 15px;
    }
    .skeleton_content {
      li {
        font-size: 16px;
      }
      li:nth-child(2) {
        font-size: 13px;
        color: silver;
      }
      li:nth-child(5),
      li:nth-child(6) {
        font-size: 13px;
        margin-top: 10px;
        color: rgb(117, 116, 116);
      }
    }
    /deep/ .van-icon {
      font-size: 18px;
    }
  }
  .color {
    color: dodgerblue;
  }
  .color1 {
    color: silver;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .active {
    display: none;
  }
  .show {
    display: inline-block;
  }
  .active1 {
    display: inlin-block;
  }
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
